import _waterMark from './dom-watermark'
import { dataURLtoFile, fileToBase64 } from '@/utils/file'

// 标准参数
let canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D
const configDefault = {
  width: 100,
  height: 100
}
const baseConfig = {
  text: '新视窗-水印', // 文字
  fontFamily: 'microsoft yahei', // 字体
  color: '#999', // 颜色
  fontSize: 16, // 大小
  opacity: 100, // 透明度
  bottom: 10, // 下边位置
  right: 10, // 右边位置
  ratio: 1, // 压缩比
  top: 10, // 右上为主
  left: 10 // 右上为主
}

/**
 * 参数 {Object} opt
 * @param {String} text    水印文本，默认'新视窗'
 * @param {String} font    水印字体，默认'30px 黑体'
 * @param {Int} canvasWidth    单个水印容器宽度，默认500
 * @param {Int} canvasHeight    单个水印容器高度，默认200
 * @param {String} textAlign    水印文本对齐方式，默认'center'
 * @param {String} textStyle    水印文本样式，默认'rgba(100,100,100,0.15)'
 * @param {Int} degree    水印文本旋转角度，默认 -20
 * @param return
 **/
export const domWatermark = function (opt = {}) {
  return new _waterMark(opt)
}

// 将base64转换为文件
export function detailImg(file: File, options: typeof baseConfig = baseConfig): Promise<File> {
  return new Promise(function (resolve, reject) {
    const { text, fontFamily, color, fontSize, opacity, bottom, right, ratio } = options
    initParams()
    fileToBase64(file, initImg)
    // 参数初始化
    function initParams() {
      baseConfig.text = text || baseConfig.text
      baseConfig.fontFamily = fontFamily || baseConfig.fontFamily
      baseConfig.color = color || baseConfig.color
      baseConfig.fontSize = fontSize || baseConfig.fontSize
      baseConfig.opacity = opacity || baseConfig.opacity
      baseConfig.bottom = bottom || baseConfig.bottom
      baseConfig.right = right || baseConfig.right
      baseConfig.ratio = ratio || baseConfig.ratio
    }
    // 加载图片
    function initImg(data: string | ArrayBuffer): void {
      const img = new Image()
      img.src = data as string
      img.onload = function () {
        const { width, height } = img
        cretedCanvas(width, height)
        ctx && ctx.drawImage(img, 0, 0, width, height)
        setText(width, height)
        resolve(
          dataURLtoFile(
            (document.getElementById('canvas') as HTMLCanvasElement).toDataURL(
              file.type,
              baseConfig.ratio
            ),
            file.name
          )
        )
        document.body.removeChild(canvas)
      }
      img.onerror = function (e) {
        reject(e)
      }
    }
    // 创建画板
    function cretedCanvas(width: number, height: number) {
      canvas = document.getElementById('canvas') as HTMLCanvasElement
      if (canvas === null) {
        canvas = document.createElement('canvas')
        canvas.id = 'canvas'
        canvas.className = 'avue-canvas'
        document.body.appendChild(canvas)
      }
      ctx = canvas.getContext('2d') as CanvasRenderingContext2D
      canvas.width = width
      canvas.height = height
    }
    // 添加水印
    function setText(width: number, height: number) {
      const txt = baseConfig.text
      const param = calcParam(txt, width, height)
      if (ctx) {
        ctx.font = param.fontSize + 'px ' + baseConfig.fontFamily
        ctx.fillStyle = baseConfig.color
        ctx.globalAlpha = baseConfig.opacity / 100
        ctx.fillText(txt, param.x, param.y)
      }
    }
    // 计算比例
    function calcParam(txt: string, width: number, height: number) {
      let x: number, y: number
      // 字体的比例
      const calcFontSize = baseConfig.fontSize / configDefault.width
      const fontSize = calcFontSize * width

      if (baseConfig.bottom) {
        y = configDefault.height - baseConfig.bottom
      } else {
        y = baseConfig.top
      }

      if (baseConfig.right) {
        x = configDefault.width - baseConfig.right
      } else {
        x = baseConfig.left
      }
      ctx.font = baseConfig.fontSize + 'px ' + baseConfig.fontFamily
      const txtWidth = Number(ctx.measureText(txt).width)

      x = x - txtWidth

      const calcPosX = x / configDefault.width
      const calcPosY = y / configDefault.height

      x = calcPosX * width
      y = calcPosY * height
      return {
        x: x,
        y: y,
        fontSize: fontSize
      }
    }
  })
}
